<template>
    <el-collapse>
        <el-collapse-item name="1" class="collapse">
            <template #title>
                <span class="collapseTitle">
                    导航组件
                </span>
            </template>
            <div>
                <draggable
                    :list="list"
                    ghost-class="ghostClass"
                    chosen-class="chosenClass"
                    animation="300"
                    :force-fallback="true"
                    :sort="false"
                    :group="{name:'lowcode',pull:'clone',put:false}"
                    @start="onStart"
                    :clone="cloneDefaultField"
                    item-key="sourceId"
                >
                    <template #item="{ element }">
                        <div class="itemClass">
                            {{ element.name }}
                        </div>
                    </template>
                </draggable>
            </div>
        </el-collapse-item>
    </el-collapse>
</template>

<script>
import draggable from "vuedraggable";
import {deepCopy} from "@/utils/tagCreate";

export default {
    name: "NavigationIndex",
    components: {
        draggable
    },
    data() {
        return {
            list: [
                {
                    name: "菜单列表", title: "菜单列表编辑", component: "MenuComponent", drawerComponent: "MenuDrawer", sourceId: 1,
                    propJson: {
                        editFlag: true,
                        menuModelDirection: "horizontal",
                        menuHeight: "",
                        backgroundColor: "#545c64",
                        textColor: "#fff",
                        activeTextColor: "#ffd04b",
                        uniqueOpened: false,
                        menuTrigger: "click",
                        menuJson: [{index: "home",title: "首页",routeTo: "/fileSystem/fileSystem/fileSystemIndex",parent: "",children: []},{index: "myFile",title: "我的文件",routeTo: "/fileSystem/fileSystem/myFile",parent: "",children: [{index: "allFile",title: "全部文件",routeTo: "/fileSystem/fileSystem/myFile/allFile",parent: "/fileSystem/fileSystem/myFile",children: []},{index: "mp4File",title: "视频",routeTo: "/fileSystem/fileSystem/myFile/mp4File",parent: "/fileSystem/fileSystem/myFile",children: []}]}],
                        firstMenuFontSize: "",
                        secondMenuFontSize: "",
                        thirdMenuFontSize: "",
                        isRecordBreadCrumb: false,
                        breadCrumbVariable: "",
                    }
                },
                {
                    name: "下拉菜单", title: "下拉菜单编辑", component: "MenuDropDownComponent", drawerComponent: "MenuDropDownDrawer", sourceId: 2,
                    propJson: {
                        editFlag: true,
                        splitButton: 'span',
                        buttonType: "default",
                        isPlain: false,
                        isCustomColor: false,
                        customColor: "",
                        buttonSize: "default",
                        disabled: false,
                        placement: "bottom",
                        trigger: "hover",
                        hideOnClick: true,
                        divided: false,
                        actionInfo: {optionValueType: "custom", optionsCustom: "", optionsCustomValueType: "Array", optionsVariableParam: "",
                            apiType: "MSOA", apiPath: "", apiMethod: "GET", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                            isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []},
                        defaultActionInfo: {optionValueType: "custom", optionsCustom: "", optionsCustomValueType: "String", optionsVariableParam: "",
                            apiType: "MSOA", apiPath: "", apiMethod: "GET", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                            isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []},
                        isAddChangeAction: false,
                        isReloadPage: false,
                        changeAction: [{isAsyncAction: false}],
                        dropDownJsonPath: "",
                        commandField: "",
                        commandVariable: "",
                        avatarSize: "default",
                        avatarUrl: "",
                        avatarShape: "circle",
                        avatarFit: "fill"
                    }
                },
                {
                    name: "导航面包屑", title: "导航面包屑编辑", component: "BreadCrumbComponent", drawerComponent: "BreadCrumbDrawer", sourceId: 3,
                    propJson: {
                        editFlag: true,
                        fontSize: "",
                        breadCrumbValue: {optionValueType: "custom", optionsCustom: "", optionsCustomValueType: "String", optionsVariableParam: "",
                            apiType: "MSOA", apiPath: "", apiMethod: "GET", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                            isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []},
                    }
                },
                {
                    name: "Affix固钉", title: "Affix固钉编辑", component: "AffixComponent", drawerComponent: "AffixDrawer", sourceId: 4,
                    propJson: {
                        editFlag: true,
                        affixWidth: "200px",
                        affixNameSize: "15px",
                        positionType: "rightBottom",
                        positionRight: "10px",
                        positionBottom: "20px",
                        positionTop: "30px",
                        positionLeft: "30px",
                        cardPaddingTop: "20px",
                        cardPaddingBottom: "20px",
                        affixShow: {optionValueType: "custom", optionsCustom: "true", optionsCustomValueType: "Object", optionsVariableParam: "",
                            apiType: "MSOA", apiPath: "", apiMethod: "GET", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                            isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []},
                        affixList: [
                            {
                                affixName: "默认",
                                buttonIcon: "ArrowUpOutlined",
                                affixAction: [{isAsyncAction: false}],
                                buttonSize: "small",
                                isAddBadge: false,
                                badgeBindVariable: "",
                                badgeMaxNum: 100,
                                badgeIsBot: false,
                                badgeType: "primary",
                                badgeValue: {optionValueType: "custom", optionsCustom: "", optionsCustomValueType: "String", optionsVariableParam: "",
                                    apiType: "MSOA", apiPath: "", apiMethod: "GET", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                                    isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []},
                            },
                            {
                                affixName: "默认",
                                buttonIcon: "ArrowUpOutlined",
                                affixAction: [{isAsyncAction: false}],
                                buttonSize: "small",
                                isAddBadge: false,
                                badgeBindVariable: "",
                                badgeMaxNum: 100,
                                badgeIsBot: false,
                                badgeType: "primary",
                                badgeValue: {optionValueType: "custom", optionsCustom: "", optionsCustomValueType: "String", optionsVariableParam: "",
                                    apiType: "MSOA", apiPath: "", apiMethod: "GET", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                                    isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []},
                            }
                        ]
                    }
                }
            ]
        }
    },
    methods: {
        cloneDefaultField(e) {
            return deepCopy(e);
        },
        onStart(e) {
            e.item._underlying_vm_.id = this.generateUUID();
        },
        randomNumber() {
            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        },
        generateUUID() {
            return (this.randomNumber() + this.randomNumber() + "-" + this.randomNumber() + "-" + this.randomNumber() +
                "-" + this.randomNumber() + "-" + this.randomNumber() + this.randomNumber() + this.randomNumber());
        }
    }
}
</script>

<style scoped lang="less">
.collapse {
    .collapseTitle {
        padding-left: 2%;
        font-size: 15px;
        font-weight: bold;
    }
    .ghostClass {

    }
    .chosenClass {

    }
    .itemClass {
        font-size: 13px;
        color: #606266;
        text-align: center;
        width: 90%;
        line-height: 250%;
        margin-left: 5%;
        //去除光标
        caret-color: transparent;
        background-color: #FAFCFF;
        transition: box-shadow 0.3s ease;
        border: 1px solid #F0F2F5;
        border-radius: 5px;
        margin-bottom: 2%;
    }
    .itemClass:hover{
        cursor: pointer;
        color: #409EFF;
        background-color: #EBEEF5;
    }
}
</style>